
// --------------------------------------------------------------
// ----------------------常用基本全局样式文------------------------
// --------------------------------------------------------------

// ======================= 元素重置全局样式 =======================

*, *:before, *:after {
  box-sizing: border-box;
  // padding: 0;
  // margin: 0;
}
  
body {
  font-family: "微软雅黑";
}

a, a:visited, a:focus, a:hover, a:link, a:active {
  color: inherit;
  outline: none;
  text-decoration: none;
}

button, input {
  border: none;
  background-color: transparent;
  outline: none;
  border-radius: 0;
  font-size: inherit;
}

a, button {
  cursor: pointer;
}

ul, li, ol {
  list-style: none;
}

// FIXME: html2canvas 生成图片时，会因为设置全局 img 样式而导致文字变形、偏移，所以不及建议修改全局 img 样式
// img {
//   width: 100%;
//   // height: 100%; // 自动适配高度
//   border: none;
//   display: inline-block;
//   object-fit: cover;
// }

div:focus {
  outline: none;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar:horizontal {
  height: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  transition: all .2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.302);
}

// ======================= flex全局样式 =======================

/* flex布局 */
.flex { display: flex; flex-wrap: nowrap; }
.f-wrap { display: flex; flex-wrap: wrap; }
.f1 { flex: 1; }
.f2 { flex: 2; }
.f3 { flex: 3; }
/* 垂直居中 */
.f-vertical { display: flex; align-items: center; }
/* 水平居中 */
.f-center { display: flex; justify-content: center; }
/* 水平 + 垂直居中 */
.fvc { display: flex; align-items: center; justify-content: center; }
/* 右对齐 */
.f-right { display: flex; justify-content: flex-end; }
/* 两端对齐 */
.f-between { display: flex; justify-content: space-between; }
/* 靠底部对齐 */
.f-bottom { display: flex; align-items: flex-end; }


/* 溢出...显示 当前节点生效 */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ellipsis-1, .ellipsis-2, .ellipsis-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 溢出...显示 子节点生效 */
.ellipsis-1 { -webkit-line-clamp: 1; }
.ellipsis-2 { -webkit-line-clamp: 2; }
.ellipsis-3 { -webkit-line-clamp: 3; }
